<!DOCTYPE HTML>
<html lang="zh-cn">
 
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta content="width=device-width,initial-scale=1.0" name="viewport">
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="black" name="apple-mobile-web-app-status-bar-style">
  <meta content="telephone=no" name="format-detection">
  <meta content="email=no" name="format-detection">
  <title>系统管理</title>


  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-treegrid/0.2.0/css/jquery.treegrid.min.css">

</head>
 
<body>
 
<div class="panel panel-default">
<div class="panel-body">
<table id="table_server" ></table>
</div>
</div>


</body>


<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.0/extensions/treegrid/bootstrap-table-treegrid.js"></script>
<script src="https://cdn.bootcss.com/jquery-treegrid/0.2.0/js/jquery.treegrid.min.js"></script>
<!-- Latest compiled and minified Locales -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js"></script>

<script type="text/javascript">
	  var data = JSON.parse('{"page":1,"rows":[{"dept":{"deptDesc":"","deptno":10,"dname":"销售部"},"loginName":"lisi","loginPwd":"456","realName":"李四","userId":3,"userStatus":"0"},{"dept":{"$ref":"$.rows[0].dept"},"loginName":"wangwu","loginPwd":"789","realName":"王五","userId":4,"userStatus":"0"},{"dept":{"$ref":"$.rows[0].dept"},"loginName":"wangwu","loginPwd":"789","realName":"王五","userId":4,"userStatus":"0"},{"dept":{"$ref":"$.rows[0].dept"},"loginName":"wangwu","loginPwd":"789","realName":"王五","userId":4,"userStatus":"0"},{"dept":{"$ref":"$.rows[0].dept"},"loginName":"wangwu","loginPwd":"789","realName":"王五","userId":4,"userStatus":"0"},{"dept":{"$ref":"$.rows[0].dept"},"loginName":"wangwu","loginPwd":"789","realName":"王五","userId":4,"userStatus":"0"},{"dept":{"$ref":"$.rows[0].dept"},"loginName":"wangwu","loginPwd":"789","realName":"王五","userId":4,"userStatus":"0"},{"dept":{"$ref":"$.rows[0].dept"},"loginName":"wangwu","loginPwd":"789","realName":"王五","userId":4,"userStatus":"0"},{"dept":{"$ref":"$.rows[0].dept"},"loginName":"wangwu","loginPwd":"789","realName":"王五","userId":4,"userStatus":"0"},{"dept":{"$ref":"$.rows[0].dept"},"loginName":"wangwu","loginPwd":"789","realName":"王五","userId":4,"userStatus":"0"},{"dept":{"$ref":"$.rows[0].dept"},"loginName":"wangwu","loginPwd":"789","realName":"王五","userId":4,"userStatus":"0"},{"dept":{"$ref":"$.rows[0].dept"},"loginName":"wangwu","loginPwd":"789","realName":"王五","userId":4,"userStatus":"0"},{"dept":{"$ref":"$.rows[0].dept"},"loginName":"wangwu","loginPwd":"789","realName":"王五","userId":4,"userStatus":"0"},{"dept":{"$ref":"$.rows[0].dept"},"loginName":"wangwu","loginPwd":"789","realName":"王五","userId":4,"userStatus":"0"},{"dept":{"$ref":"$.rows[0].dept"},"loginName":"wangwu","loginPwd":"789","realName":"王五","userId":4,"userStatus":"0"},{"dept":{"$ref":"$.rows[0].dept"},"loginName":"wangwu","loginPwd":"789","realName":"王五","userId":4,"userStatus":"0"},{"dept":{"$ref":"$.rows[0].dept"},"loginName":"wangwu","loginPwd":"789","realName":"王五","userId":4,"userStatus":"0"},{"dept":{"$ref":"$.rows[0].dept"},"loginName":"wangwu","loginPwd":"789","realName":"王五","userId":4,"userStatus":"0"},{"dept":{"$ref":"$.rows[0].dept"},"loginName":"wangwu","loginPwd":"789","realName":"王五","userId":4,"userStatus":"0"},{"dept":{"$ref":"$.rows[0].dept"},"loginName":"zhaoliu","loginPwd":"111","realName":"赵六","userId":5,"userStatus":"0"},{"dept":{"deptno":20,"dname":"华南区域"},"loginName":"fanqi","loginPwd":"222","realName":"范七","userId":6,"userStatus":"0"},{"dept":{"$ref":"$.rows[3].dept"},"loginName":"maoba","loginPwd":"333","realName":"毛八","userId":7,"userStatus":"0"}],"total":11}');
$(function () {
 
    var t = $("#table_server").bootstrapTable({
         // url: 'http://localhost:8080/uc/getUserSplit',
         // method: 'get',
        data:data.rows,
        dataType: "json",
        striped: true,//设置为 true 会有隔行变色效果
        undefinedText: "空",//当数据为 undefined 时显示的字符
        pagination: true, //分页
        search: true, //显示搜索框
        pageNumber: 1,//如果设置了分页，首页页码
        pageSize: 10,//如果设置了分页，页面数据条数
        pageList:[5,10,20,30],	//如果设置了分页，设置可供选择的页面数据条数。设置为All 则显示所有记录。
        paginationPreText: '‹',//指定分页条中上一页按钮的图标或文字,这里是<
        paginationNextText: '›',//指定分页条中下一页按钮的图标或文字,这里是>
        data_local: "zh-US",//表格汉化
        // sidePagination: "server", //服务端处理分页
        // queryParams: function (params) {//自定义参数，这里的参数是传给后台的，我这是是分页用的
        //     return {//这里的params是table提供的
        //         cp: params.offset,//从数据库第几条记录开始
        //         ps: params.limit//找多少条
        //     };
        // },
        idField: "userId",//指定主键列
        columns: [
            {
                title: '#',//表的列名
                field: 'userId',//json数据中rows数组中的属性名
                align: 'center'//水平居中
            },
            {
                title: '账号',
                field: 'loginName',
                align: 'center'
            },
            {
                title: '真实姓名',
                field: 'realName',
                align: 'center'
            },
            {
                //EMAIL
                title: '邮箱',
                field: 'email',
                align: 'center'
            },
            {
                //部名字
                title: '部门',
                field: 'dept.dname',//可以直接取到属性里面的属性，赞
                align: 'center'
            },
            {
                title: '状态',
                field: 'userStatus',
                align: 'center',
                formatter: function (value, row, index) {//自定义显示，这三个参数分别是：value该行的属性，row该行记录，index该行下标
                    return row.userStatus == 0 ? "正常" : row.userStatus == 1 ? "请假" : "离职";
                }
 
            },
            {
                title: '操作',
                field: 'userId',
                align: 'center',
                formatter: function (value, row, index) {//自定义显示可以写标签哦~
                    return '<a href="#" mce_href="#" onclick="edit(\'' + row.userId + '\')">操作</a> ';
                }
            }
 
        ]
    });
 
 
    t.on('load-success.bs.table', function (data) {//table加载成功后的监听函数
        console.log("load success");
        $(".pull-right").css("display", "block");
    });
 
});
</script>

</html>
